<template>
	<view class="wallet">
		<u-toast ref="uToast" />
		<view class="wallet-content">
			<view class="wallet-top">
				申请开票
				<img @click="back" src="@/static/img/common_btn_return_n.png" style='width: 10px;height: 19px;' alt="">
			</view>
		</view>
		<view class="apply-wrap">
		<view class="apply-date" >
			<span>2019年11月</span>
			<view class="apply-list">
				<view class="apply-item" v-for="(item,index) in list" @click='select(index)'>
					<view class="apply-item-left">
						<img v-if="item.isselect == false" src="@/static/img/wallet_btn_notchecked.png" style='width: 14px;height: 14px;' alt="">
						<img v-if="item.isselect " src="@/static/img/wallet_btn_checked.png" style='width: 14px;height: 14px;' alt="">
					</view>
					<view class="apply-item-middle">
						<view class="apply-item-middle-1"><img src="@/static/img/wallet_icon_clock.png" style='width: 6px;height: 6px;'/>11月30日 11:11</view>
						<view class="apply-item-middle-2"><img src="@/static/img/wallet_icon_green.png" style='width: 6px;height: 6px;'/><span>温州市星际控股集团有限公司</span></view>
						<view class="apply-item-middle-3"><img src="@/static/img/wallet_icon_red.png" style='width: 6px;height: 6px;'/><span>温州市星际控股集团有限公司</span></view>
					</view>
					<view class="apply-item-right">
						￥20.00
					</view>
				</view>
				<view class="line1"></view>
				
			</view>
		</view>
		<view class="apply-date">
			<span>2019年11月</span>
			<view class="apply-list">
				<view class="apply-item">
					<view class="apply-item-left">
						<img src="@/static/img/wallet_btn_notchecked.png" style='width: 14px;height: 14px;' alt="">
					</view>
					<view class="apply-item-middle">
						<view class="apply-item-middle-1"><img src="@/static/img/wallet_icon_clock.png" style='width: 6px;height: 6px;'/>11月30日 11:11</view>
						<view class="apply-item-middle-2"><img src="@/static/img/wallet_icon_green.png" style='width: 6px;height: 6px;'/><span>温州市星际控股集团有限公司</span></view>
						<view class="apply-item-middle-3"><img src="@/static/img/wallet_icon_red.png" style='width: 6px;height: 6px;'/><span>温州市星际控股集团有限公司</span></view>
					</view>
					<view class="apply-item-right">
						￥20.00
					</view>
				</view>
			</view>
		</view>
		</view>
		<view class="apply-add" @click='add' >提交申请</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import amap from "@/js_sdk/amap-wx.js";
	let _this;
	export default{
		data(){
			return{
				list:[
					{
						"id":1,
						"name":"1",
						"isselect":false
					},
					{
						"id":2,
						"name":"1",
						"isselect":false
					},
					{
						"id":3,
						"name":"1",
						"isselect":false
					},
					{
						"id":3,
						"name":"1",
						"isselect":false
					},
					{
						"id":3,
						"name":"1",
						"isselect":false
					},
					{
						"id":3,
						"name":"1",
						"isselect":false
					},
					{
						"id":3,
						"name":"1",
						"isselect":false
					},
					{
						"id":3,
						"name":"1",
						"isselect":false
					},
				],
				selected:''
			}
		},
		created() {
			_this = this;
		},
		computed: mapState(['hasLogin', 'userName', 'token']),
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			select(index){
				if(this.list[index].isselect){
					this.list[index].isselect = false;
				}else{
					this.list[index].isselect = true;
				}
				var len = this.list.length;
				this.selected = '';
				for(var i=0; i<len; i++){
					if(this.list[i].isselect)
					this.selected += this.list[i].id + ',';
				}
				if(this.selected != ''){
					this.selected = this.selected.substr(0,this.selected.length-1);
				}
				console.log(this.selected);
				
			},
			add(){
				uni.request({
					url: this.$store.state.ip + 'work/workform/applyWork', //仅为示例，并非真实接口地址。
					data: JSON.stringify({
						"title": "发票申请",
						"content": "发票申请",
						"type":1,
						"status":0,
						"orderCode":_this.selected
					}),
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.$refs.uToast.show({
								title: '申请成功',
								duration: 2000,
								position: 'bottom',
							})
						} else if (res.data.code == '040081') {
				
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
				
							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
				
			},

		}
	}
</script>

<style>
	.wallet{
			width: 100%;
			position: relative;
			background-color: #F2F4F7;
			height: 100%;
			overflow: auto;
		}
		.wallet-content{
			background-color: #fff;
		}
		.wallet-top img{
				position: absolute;
				left: 0px;
				top: 26px;
				padding: 12px;
			}
		.wallet-top img:active{
			  background-color: #eee;
		}
		.wallet-top{
			background-color: #fff;
			font-size: 16px;
			color: #35374b;
			text-align: center;
			height: 80px;
			line-height: 100px;
			border-bottom: 1px solid #DEDFE2;
		}
		.wallet-box{
			background-color: #fff;
			margin: 12px;
			background-color: #3d9bfe; /* 不支持线性的时候显示 */
			background-image: linear-gradient(to bottom right, #ff843e , #fe4447);
			border-radius: 10px;
			padding: 30px 24px 0px 24px;
			color: #fff;
			font-size: 14px;
		}
		.wallet-item:hover{
			background-color: #eee;
		}
		.wallet-box-content b{
			font-weight: 400;
			line-height: 80px;
			font-size: 39px;
			color: #fff;
		}
		.wallet-box-content span{
			font-size: 14px;
		}
		.wallet-box-right{
			float: right;
		}
		.chongzhi{
			height: 30px;
			line-height: 30px;
			font-size: 15px;
			background-color: #fff;	
			color: #fe4f52;
			border-radius: 20px;
			width: 90px;
			text-align: center;
		}
		.tuikuan{
			line-height: 14px;
			font-size: 14px;
			color: #ffffff;
			opacity: 0.9;
			margin-top: 20px;
			text-align: center;
		}
		hr{
			border: none;
			height: 6px;
			background-color: #f2f4f7;
		}
		.wallet-item{
			background-color: #fff;
			height: 60px;
			border-bottom: 1px solid #e1e1e3;
			margin: 0 12px 0 12px;
			padding-left: 10px;
			font-size: 15px;
			color: #35374B;
			line-height: 60px;
		}
		.wallet-item-right{
			float: right;
			font-size: 14px;
			color: #abacb4;
		}
		.wallet-item-right img{
			float: right;
			margin-top: 21px;
			margin-left: 6px;
			margin-right: 5px;
		}
		.wallet-item-end{
			height: 28px;
		}
	.apply-wrap{
		height: calc(100% - 140px);
		overflow: auto;
	}
	.apply-add{
		margin: 8px 12px;
		text-align: center;
		color: #1869E0;
		border: 1px solid #1869E0;
		border-radius: 24px;
		padding: 10px;
	}
	.apply-add:hover{
		background-color: #1869E0;
		color: #fff;
	}
	.apply-date{
		padding: 15px 12px 0px 12px;
	}
	.apply-date > span{
		color: #a6a6a6;
		font-size: 14px;
		margin-bottom: 6px;
		display: inline-block;
	}
	.apply-list{
		background-color: #fff;
		border-radius: 4px;
	}
	.apply-item{
		overflow: auto;
	}
	.line1{
		border-top: 1px solid #eaf2ee;
		margin-left: 55px;
	}
	.apply-item-left{
		padding: 0 21px;
		margin-top: 47px;
		float: left;
	}
	.apply-item-middle{
		float: left;
		position: relative;
	}
	.apply-item-middle img{
		margin-right: 7px;
		margin-bottom: 1.5px;
	}
	.apply-item-middle-1{
		margin-top: 15px;
		margin-bottom: 15px;
		color: #949799;
		font-size: 10px;
	}
	.apply-item-middle-2{
		margin-bottom: 12px;
		color: #35374B;
		font-size: 14px;
	}
	.apply-item-middle-2::before{
		content: "";
		height: 18px;
		border: 1px dashed #e4eaea;
		position: absolute;
		top: 64px;
		left: 2px;
	}
	.apply-item-middle-2 span ,.apply-item-middle-3 span{
		display: inline-block;
		width: 190px;
	}
	.apply-item-middle-3{
		margin-bottom: 16px;
		color: #35374B;
		font-size: 14px;
	}
	.apply-item-right{
		float: right;
		color: #01bf1b;
		font-size: 16px;
		margin-right: 12px;
		margin-top: 45px;
	}
</style>
